<template>
  <a-modal 
    :visible="visible"
    :title="title"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    :footer="null"
    ref="modal"
    @cancel="closeModal()"
    width="600px">
    <a-table 
    :columns="columns" 
    :rowKey="record => record.id"
    :pagination="pagination"
    @change="tableChange"
    :data-source="shareCountList" 
    bordered>
  </a-table>
  </a-modal>
</template>
<script>
export default {
  props: {
    visible:{
      type:Boolean,
      default:false,
    },
    posterId: {
      type: String,
      default: '',
      require: true
    }
  },
  computed: {
    title () {
      return '分享详情'
    },
  },
  data () {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "sort",
          key: "sort",
          align: "center",
          width: '130px',
          customRender: (text, record, index) => {
            return (this.pagination.current - 1) * this.pagination.pageSize + (index + 1)
          }
        },
        {
          title: "分享时间	",
          dataIndex: "shareTime",
          key: "shareTime",
          align: "center",
           width: '130px'
        },
        {
          title: "分享到",
          dataIndex: "shareTo",
          key: "shareTo",
          align: "center",
           width: '130px'
        },
      ],
      shareCountList: [],
      loading: false,
      pagination: {
        showQuickJumper: true,
        total: 0,
        current: 1,
        pageSize: 10,
        showTotal: total => `共${total}条`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100', '200']
      }
    }
  },
  watch: {
    visible(val){
      if(val === true) {
        this.getsharePage(this.posterId)
      }
    },
  },
  created(){
    
  },
  methods: {
    closeModal () {
      this.$emit('cancel')
    },
    tableChange(pagination) {
      console.log(pagination)
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.getsharePage(this.posterId)
    },
    async getsharePage(posterId) {
      this.loading = true;
      const res = await this.$get("goldenhome/gh/poster_admin/poster/share/page", {
        posterId,
        current: this.pagination.current,
        size: this.pagination.pageSize
      });
      this.loading = false;
      if(res && res.returnCode == 1000) {
        this.pagination.total = res.dataInfo.total;
        this.shareCountList = res.dataInfo.records;
      }
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  position: relative;
  img {
    width: 100%;
    display: block;
  }
  .qrcode {
    width: 80px;
    height: 80px;
    position: absolute;
    text-align: center;
    background-color: #fff;
    color: #666;
    text-align: center;
    font-size: 10px;
    line-height: 80px;
    border: 2px dashed #666;
  }
}
</style>
